<template>
  <div class="home">
    <Header />
    <main class="main-content">
      <SearchBar />
      <ServiceCards />
      <ContentGrid />
      <CategoryNav />
      <SideMenu />
    </main>
    <Footer />
  </div>
</template>

<script>
import Header from '@/components/layout/Header.vue'
import SearchBar from '@/components/SearchBar.vue'
import ServiceCards from '@/components/ServiceCards.vue'
import ContentGrid from '@/components/ContentGrid.vue'
import CategoryNav from '@/components/CategoryNav.vue'
import SideMenu from '@/components/SideMenu.vue'
import Footer from '@/components/layout/Footer.vue'

export default {
  name: 'Home',
  components: {
    Header,
    SearchBar,
    ServiceCards,
    ContentGrid,
    CategoryNav,
    SideMenu,
    Footer
  }
}
</script>

<style scoped>
.home {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
.hero-section {
  position: relative;
  background-image: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.6) 100%),
    url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2072&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-bottom: 30px;
}
.main-content {
  flex: 1;
  padding-top: 70px;
  width: 100%;
  box-sizing: border-box;
}
</style> 